<template>
  <div class="course-container">
    <!-- 左边的表格 -->
    <el-table :data="uniqueCourseList" style="width: 50%; height: 100%;" @row-click="handleRowClick"
      row-class-name="course-row" header-row-class-name="course-header" :highlight-current-row="true">
      <el-table-column prop="subjectName" label="课程名" width="300" align="center"></el-table-column>
      <el-table-column prop="points" label="当前积分" width="100" align="center"></el-table-column>
      <el-table-column prop="totalPoints" label="总应得积分" width="100" align="center"></el-table-column>
      <el-table-column prop="normalGrade" label="换算后的平时分（此刻）" width="200" align="center"></el-table-column>
    </el-table>

    <!-- 右边的详情区域 -->
    <div class="course-details" v-if="selectedCourse">
      <div class="details-header">
        <h3 class="details-title">积分日志</h3>
      </div>
      <div class="details-content">
        <div v-if="selectedCourse.pointsLog.length === 0">
          <p class="no-logs">暂无积分日志</p>
        </div>
        <div v-else>
          <div class="log-box" v-for="log in selectedCourse.pointsLog" :key="log.logId">
            <div class="log-item">
              <div class="label">日志ID</div>
              <div class="value">{{ log.logId }}</div>
            </div>
            <div class="log-item">
              <div class="label">行为</div>
              <div class="value">{{ log.behavior }}</div>
            </div>
            <div class="log-item">
              <div class="label">积分</div>
              <div class="value">{{ log.point }}</div>
            </div>
            <div class="log-item">
              <div class="label">日期</div>
              <div class="value">{{ formatDate(log.getDate) }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <h1 v-else style="width: 40%;">选择查看课程积分日志</h1>
  </div>
</template>

<script>
import { getPointsLog } from '@/utils/urlManager';
import axios from 'axios';

export default {
  data() {
    return {
      courseList: [], // 从后端获取的原始课程列表
      uniqueCourseList: [], // 去重后的课程列表
      selectedCourse: null, // 当前选中的课程详情
    };
  },
  mounted() {
    this.getPointsLog();
  },
  methods: {
    // 获取积分日志
    getPointsLog() {
      axios.get(getPointsLog)
        .then((response) => {
          if (response.data.data) {
            this.processCourseData(response.data.data);
          } else {
            this.$message.warning("日志记录为空");
          }
        })
        .catch((err) => {
          console.error(err);
          this.$message.error(err);
        });
    },
    // 处理课程数据，去重并整理
    processCourseData(data) {
      const uniqueCourses = new Map();
      data.forEach(item => {
        // 如果 isCancle 为 1，则跳过这条数据
        if (item.isCancel == "1") {
          return;
        }
        const courseId = item.subjectId;
        if (!uniqueCourses.has(courseId)) {
          uniqueCourses.set(courseId, {
            subjectName: item.subjectName,
            points: item.points,
            totalPoints: item.totalPoints,
            normalGrade: (item.points / item.totalPoints * 100 * 0.5).toFixed(2),
            pointsLog: []
          });
        }
        uniqueCourses.get(courseId).pointsLog.push({
          logId: item.logId,
          behavior: item.behavior,
          points: item.points,
          getDate: item.getDate,
          point: item.point,

        });
      });
      this.uniqueCourseList = Array.from(uniqueCourses.values());
      // this.uniqueCourseList.normalGrade = this.uniqueCourseList.points/this.uniqueCourseList.total_points * 100 * 0.5
    },
    // 表格行点击事件
    handleRowClick(row) {
      this.selectedCourse = row;
    },
    // 格式化日期
    formatDate(date) {
      if (!date) return '';
      const dateObj = new Date(date);
      return `${dateObj.getFullYear()}年${String(dateObj.getMonth() + 1).padStart(2, '0')}月${String(dateObj.getDate()).padStart(2, '0')}日 ${String(dateObj.getHours()).padStart(2, '0')}:${String(dateObj.getMinutes()).padStart(2, '0')}:${String(dateObj.getSeconds()).padStart(2, '0')}`;
    }
  }
};
</script>

<style scoped>
.course-container {
  display: flex;
  height: 100%;
  width: 100%;
  background-color: #f5f5f5;
  padding: 20px;
  box-sizing: border-box;
}

.course-details {
  width: 40%;
  padding: 20px;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin-left: 20px;
  overflow: auto;
}

.details-header {
  background-color: #f0f0f0;
  padding: 10px 0;
  border-bottom: 1px solid #e0e0e0;
  text-align: center;
}

.details-title {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
}

.details-content {
  padding-top: 10px;
}

.no-logs {
  text-align: center;
  color: #888;
  font-size: 14px;
  margin-top: 20px;
}

.log-box {
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
}

.log-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.log-item .label {
  font-weight: bold;
  color: #333;
}

.log-item .value {
  color: #555;
}
</style>